{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">

        <style>
        body{
            background: url("{% static  'bj.jpg' %}");
            background-attachment: fixed;
            background-size: cover;
        }
        th{
            color: white;
        }
    </style>
</head>
<body>
<div style="color: white;text-align: left;margin-left: 300px">
    <h1 style="text-align: center">欢迎使用小工具集合</h1>
    <br>
    <br>
    <br>

    <div style="width: 60%;margin-top: 100px;margin-left: 100px">
        <button style="color: #0d8ddb" onclick="show_random_div()" class="btn btn-success">随机字符串</button>
        <br><br>
        <button class="btn btn-success"> <a href="/tools_zhengjiao/">正交生成器</a></button>
        <br><br>
        <button class="btn btn-success"> <a href="/tools_json/">json字符串对比工具</a></button>
    </div>

</div>


{# 随机字符串窗口#}
<div id="random_div"
        style="padding-left: 10px;display: none;position: absolute;left: 40%;top: 20%;width:500px;height:200px;border: solid 1px black;background: #353C48;box-shadow: 4px 4px 8px grey">
    <label style="color: white" for="">请输入需要的字母数字随机字符串长度：   </label><input id='str_length' type="text" style="color: black;width: 15%">
    <button onclick="make_random()" class="btn btn-success">提交</button>
    <button onclick="close_random_div()" class="btn btn-danger" style="float: right;">关闭</button>
    <br><br>
    <textarea name="" id="random_str"  style="width: 90%" rows="5"></textarea>
</div>
<script>
    function close_random_div(){
        document.location.reload();
    }

    function show_random_div() {
        $("#random_div").css('display','block');
    }

    function make_random() {
        length = $("#str_length").val();
        $.get("/make_random/",
            {"length":length},
            function (ret) {
                $("#random_str").val(ret);
        })
    }
</script>


</body>
</html>